<template>
  <div class="app-container">
      
    <el-form :inline="true" :model="searchMap" class="demo-form-inline">
        <el-form-item label="名称">
            <el-input v-model="searchMap.skuName" placeholder="名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="fetchData">查询</el-button>
        </el-form-item>
    </el-form>
    <!-- banner列表 -->
    <el-table
      :data="skuInfoList"
      border
      fit
      highlight-current-row>

      <el-table-column prop="id" label="SKU ID" width="100"/>
      <el-table-column label="banner" width="320" align="center">
        <template slot-scope="scope">
          <div class="info">
            <div class="pic">
              <img :src="scope.row.skuDefaultImg" alt="scope.row.title" style="width: 50px;">
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="skuName" label="名称" />

      <el-table-column prop="price" label="价格" width="70"/>
      <el-table-column prop="tmName" label="品牌" width="70"/>
      <el-table-column prop="category3Name" label="分类" width="70"/>

      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.isSale == 0" size="mini" icon="el-icon-edit" @click="onSale(scope.row.id)">上架</el-button>
          <el-button v-if="scope.row.isSale == 1" type="danger" size="mini" icon="el-icon-delete" @click="cancelSale(scope.row.id)">下架</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      :current-page.sync="pageNo"
      :total="total"
      :page-size.sync="pageSize"
      :page-sizes="[2, 4, 6, 8, 10]"
      style="padding: 30px 0; text-align: center;"
      layout="sizes, prev, pager, next, jumper, ->, total, slot"
      @current-change="fetchData"
      @size-change="changeSize"
    />
  </div>
</template>

<script>
import * as skuApi from '../../api/gmall/product/sku.js'
export default {
    data(){
        return{
            skuInfoList:[],
            pageNo:1,
            pageSize:2,
            total:0,
            searchMap:{}
        }
    },
    methods:{
        fetchData(){
            skuApi.getSkuInfoPage(this.pageNo,this.pageSize,this.searchMap).then(res=>{
                if(res.data.ok){
                    this.skuInfoList = res.data.data.records;
                    this.total = res.data.data.total;
                }
            })
        },
        changeSize(){
            this.fetchData();
        },
        onSale(skuId){
            skuApi.onSale(skuId).then(res=>{
                alert(res.data.message)
            })
        },
        cancelSale(skuId){
           skuApi.cancelSale(skuId).then(res=>{
                alert(res.data.message)
            })
        }
    },
    mounted(){
        this.fetchData();
    }
}
</script>
